<!--多条件搜索-->
<form nz-form [formGroup]="formModel" (ngSubmit)="submitForm()">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">开始时间</nz-form-label>
        <nz-form-control >
          <app-my-date-picker [dateTimeType]="startDateTimeType" [date]="startDateTime" (event)="outDateTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">结束时间</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <app-my-date-picker [dateTimeType]="endDateTimeType" [date]="endDateTime" (event)="outDateTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">类型</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择类型">
          <!--          <input type="text" nz-input formControlName="memberId" placeholder="请选择消费会员"/>-->
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择类型" formControlName="type">
            <nz-option nzLabel="余额" nzValue="1"></nz-option>
            <nz-option nzLabel="提现" nzValue="2"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">收支</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择收支">
          <nz-select nzShowSearch nzAllowClear formControlName="cashFlowType"  nzPlaceHolder="请选择收支">
            <nz-option nzLabel="收入" nzValue="1"></nz-option>
            <nz-option nzLabel="支出" nzValue="2"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">手机号/名称</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请输入手机号/名称">
          <input type="text" id="keyword" nz-input formControlName="keyword" placeholder="手机号/名称"/>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="18">
      <div nz-col nzFlex="auto" class="search-area">
        <button nz-button nzType="primary" class="button_search"><i nz-icon nzType="search" nzTheme="outline"></i>查询</button>
      </div>
    </div>

  </div>
</form>


<div [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <nz-table #nzTable  [nzData]="listOfData" nzTableLayout="fixed"
            [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
            [nzScroll]="{ x: 'auto' }" [nzPageSizeOptions]="pageHelper.pageSizeOptions" nzShowSizeChanger (nzPageSizeChange)="onPageSizeChange($event)" >
    <thead>
    <tr>
      <th>#</th>
      <th>流水号</th>
      <th>手机号</th>
      <th>用户名</th>
      <th>类型</th>
      <th>交易金额</th>
      <th>余额</th>
      <th>凭证编号</th>
      <th>交易时间</th>
      <th>备注</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of nzTable.data, let index = index">
      <tr>
        <td nzEllipsis>{{index + 1}}</td>
        <td nzEllipsis>{{data.id}}</td>
        <td nzEllipsis>{{data.mobile}}</td>
        <td nzEllipsis>{{data.nickName}}</td>
        <td nzEllipsis>
          <span *ngIf="data.type == 1">余额</span>
          <span *ngIf="data.type == 2">提现</span>
        </td>
        <td nzEllipsis>
          <span *ngIf="data.cashFlowType == 1">+</span>
          <span *ngIf="data.cashFlowType == 2">-</span>
          {{data.money}}
        </td>
        <td nzEllipsis>{{data.balance}}</td>
        <td nzEllipsis>{{data.voucherNo}}</td>
        <td nzEllipsis>{{data.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
        <td nzEllipsis>{{data.remark}}</td>
      </tr>
    </ng-container>
    </tbody>
  </nz-table>
</div>
